<html>
<head>
    <title>Html-Qrcode Demo</title>
<body>
<div id="qr-reader" style="width:500px"></div>
<div id="qr-reader-results"></div>
</body>
<script src="/html5-qrcode.min.js"></script>
<script>
    function docReady(fn) {
        // see if DOM is already available
        if (document.readyState === "complete"
            || document.readyState === "interactive") {
            // call on next available tick
            setTimeout(fn, 1);
        } else {
            document.addEventListener("DOMContentLoaded", fn);
        }
    }

    docReady(function () {
        // var resultContainer = document.getElementById('qr-reader-results');
        var lastResult, countResults = 0;
        function onScanSuccess(decodedText, decodedResult) {
            if (decodedText !== lastResult) {
                printScanResultPretty(countResults, decodedText, decodedResult);
                ++countResults;
                lastResult = decodedText;
                // Handle on success condition with the decoded message.
                console.log(`Scan result ${decodedText}`, decodedResult);
            }
        }

        var html5QrcodeScanner = new Html5QrcodeScanner(
            "qr-reader", { fps: 10, qrbox: 250 });
        html5QrcodeScanner.render(onScanSuccess);
    });


    /** Ugly function to write the results to a table dynamically. */
    function printScanResultPretty(codeId, decodedText, decodedResult) {
        let resultSection = document.getElementById('qr-reader-results');
        let tableBodyId = "scanned-result-table-body";
        if (!document.getElementById(tableBodyId)) {
            let table = document.createElement("table");
            table.className = "styled-table";
            table.style.width = "100%";
            resultSection.appendChild(table);
            let theader = document.createElement('thead');
            let trow = document.createElement('tr');
            let th1 = document.createElement('td');
            th1.innerText = "Count";
            let th2 = document.createElement('td');
            th2.innerText = "Format";
            let th3 = document.createElement('td');
            th3.innerText = "Result";
            trow.appendChild(th1);
            trow.appendChild(th2);
            trow.appendChild(th3);
            theader.appendChild(trow);
            table.appendChild(theader);
            let tbody = document.createElement("tbody");
            tbody.id = tableBodyId;
            table.appendChild(tbody);
        }
        let tbody = document.getElementById(tableBodyId);
        let trow = document.createElement('tr');
        let td1 = document.createElement('td');
        td1.innerText = `${codeId}`;
        let td2 = document.createElement('td');
        td2.innerText = `${decodedResult.result.format.formatName}`;
        let td3 = document.createElement('td');
        td3.innerText = `${decodedText}`;
        trow.appendChild(td1);
        trow.appendChild(td2);
        trow.appendChild(td3);
        tbody.appendChild(trow);
    }
</script>
</head>
</html>